import { Form, Input, Popover, Progress } from 'antd';
import styles from './style.less';
import React, { useState } from 'react';
import { FormattedMessage, formatMessage } from 'umi';



const FormItem = Form.Item;




const PasswordValidInput = (props) => {

    const {
        form
    } = props

    const [visible, setvisible] = useState(false);
    const [popover, setpopover] = useState(false);
    const confirmDirty = false;

    const passwordStatusMap = {
        ok: (
            <div className={styles.success}>
                强度：强
            </div>
        ),
        pass: (
            <div className={styles.warning}>
                强度：中
            </div>
        ),
        poor: (
            <div className={styles.error}>
                强度：太短
            </div>
        ),
    };
    const passwordProgressMap = {
        ok: 'success',
        pass: 'normal',
        poor: 'exception',
    };


    const getPasswordStatus = () => {
        const value = form.getFieldValue('password');

        if (value && value.length > 9) {
            return 'ok';
        }

        if (value && value.length > 5) {
            return 'pass';
        }

        return 'poor';
    };
    const checkPassword = (_, value) => {
        const promise = Promise; // 没有值的情况
    
        if (!value) {
          setvisible(false);
          return promise.reject(
            "请输入密码",
          );
        } // 有值的情况
    
        if (!visible) {
          setvisible(true);
        }
    
        setpopover(!popover);
    
        if (value.length < 6) {
          return promise.reject('');
        }
    
        if (value && confirmDirty) {
          form.validateFields(['confirm']);
        }
        setvisible(false);
        return promise.resolve();
      };

    const renderPasswordProgress = () => {
        const value = form.getFieldValue('password');
        const passwordStatus = getPasswordStatus();
        return value && value.length ? (
            <div className={styles[`progress-${passwordStatus}`]}>
                <Progress
                    status={passwordProgressMap[passwordStatus]}
                    className={styles.progress}
                    strokeWidth={6}
                    percent={value.length * 10 > 100 ? 100 : value.length * 10}
                    showInfo={false}
                />
            </div>
        ) : null;
    };

    return (
        <Popover
            getPopupContainer={(node) => {
                if (node && node.parentNode) {
                    return node.parentNode;
                }

                return node;
            }}
            content={
                visible && (
                    <div
                        style={{
                            padding: '4px 0',
                        }}
                    >
                        {passwordStatusMap[getPasswordStatus()]}
                        {renderPasswordProgress()}
                        <div
                            style={{
                                marginTop: 10,
                            }}
                        >
                            请至少输入 6 个字符。请不要使用容易被猜到的密码。
                        </div>
                    </div>
                )
            }
            overlayStyle={{
                width: 240,
            }}
            placement="right"
            visible={visible}
        >
            <FormItem
                name="password"
                className={
                    form.getFieldValue('password') &&
                    form.getFieldValue('password').length > 0 &&
                    styles.password
                }
                rules={[
                    {
                        validator: checkPassword,
                    },
                ]}
            >
                <Input
                    size="large"
                    type="password"
                    placeholder='请输入密码'
                />
            </FormItem>
        </Popover>
    )
}

export default PasswordValidInput;